import React, { useEffect, useState } from 'react';
import cn from 'classnames';
import s from './style.module.css';
import i from '../../common.module.css';
import BackupList from './backupList';
import WhiteSite from './backup';
import BreadCrumb from '@/components/BreadCrumb';
import { Tabs, Helper } from '@knownsec/react-component';

const { TabPane } = Tabs;

export default function backupRecovery() {
  return (
    <>
      <BreadCrumb arr={[{ link: '', name: '备份恢复', active: true }]} />
      <div className={s.backupRecovery}>
        <div className={s.bBox}>
          {' '}
          <Tabs animated>
            <TabPane tab={<span className={s.tabTitle}>备份文件列表</span>} key={1}>
              <BackupList />
            </TabPane>
            <TabPane
              tab={
                <span className={s.tabTitle}>
                  备份文件上传
                  <Helper
                    className="pl8"
                    placement="top"
                    overlay="请先将备份文件上传至FTP/HTTP服务器，系统将自动访问您的服务器并下载备份文件到系统"
                  ></Helper>
                </span>
              }
              key={2}
            >
              <WhiteSite />
            </TabPane>
          </Tabs>
        </div>
      </div>
    </>
  );
}
